<template>
	<view>
		<view class="palyer">
			<u--form labelPosition="left" :model="model" :rules="rules" ref="form1" labelWidth='60'
				:labelStyle='formLabelStyle'>
				<u-form-item label="姓名" prop="userInfo.playerName" borderBottom ref="item1">
					<u--input v-model="model.userInfo.playerName" border="none"></u--input>
				</u-form-item>
				<u-form-item label="头像" prop="userInfo.playerHeadPortrait" borderBottom ref="item1"
					style='justify-content: space-between;'>

					<view style="flex:3"> </view>
					<uploadImage :fileList="fileList1" maxCount="1" @deletePic='deletePic' name="1"
						@afterRead='afterRead' />


				</u-form-item>

				<!-- <u-form-item label="手机号" prop="userInfo.phone" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.phone" placeholder="请输入手机号" border="none"></u--input>
				</u-form-item> -->
				<u-form-item label="照片" prop="userInfo.playerImgUrl" borderBottom ref="item1"
					style='justify-content: space-between;'>

					<view style="flex:3"> </view>
					<uploadImage :fileList="fileList2" maxCount="10" @deletePic='deletePic' name='2'
						@afterRead='afterRead' />


				</u-form-item>
				<u-form-item label="代报名手机号" prop="userInfo.playerPhone" borderBottom ref="item1">
					<u--input v-model="model.userInfo.playerPhone" placeholder="不是代报名不用填写" border="none"></u--input>
				</u-form-item>
				<u-form-item label="简介" prop="userInfo.playerIntroduce" borderBottom ref="item1">
					<textarea v-model="model.userInfo.playerIntroduce" placeholder="介绍下自己" border="none"></textarea>
				</u-form-item>
				<view v-if="detail.joinType != 0">
					<u-form-item label="机构" prop="jigouName" borderBottom @click="show = true" ref="item1">
						<picker :range="jiList" range-key="institutionName" @change='tapji'>

							<u--input v-model="jigouName" disabled disabledColor="$bg-color" placeholder="请选择机构"
								border="none"></u--input>
						</picker>
						<u-icon slot="right" name="arrow-right"></u-icon>

					</u-form-item>
					<u-form-item label="节目" prop="userInfo.programId" borderBottom @click="show = true" ref="item1">
						<picker :range="programlist" range-key="programName" @change='tappro'>

							<u--input v-model="proName" disabled disabledColor="$bg-color" placeholder="请选择先机构再选择节目"
								border="none"></u--input>
						</picker>
						<u-icon slot="right" name="arrow-right"></u-icon>

					</u-form-item>
				</view>
			</u--form>
			<button class='submites' @click="btnSubmit">确定</button>

		</view>
	</view>
</template>

<script>
	import uploadImage from '../../../components/uploadImage/uploadImage.vue';
	import {
		getInstitutionListApi,
		getCompetititonDetailApi,
		getCompetititonApplyApi,
		getUserinstitutionListApi,
		getInstitutionProgramListApi,
		getCompetititonsignUpApi,
		getCompetitionPlayerDetailApi,
		getCompetitionPlayereditApi,
		getCompetititonsignUpJoinTypeV2Api
	} from '@/config/api.js'
	import {
		wePay
	} from '@/config/goodApi.js'
	export default {
		components: {
			uploadImage,
		},
		data() {
			return {
				model: {
					userInfo: {
						competitionId: '',
						programId: '',
						playerName: '',
						playerHeadPortrait: '',
						playerIntroduce: '',
						playerImgUrl: [],
						playerPhone: '',
						institutionId: ''
					},
				},
				jiemu: '',
				rules: {
					'userInfo.playerName': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					// 'userInfo.playerHeadPortrait': {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请上传头像',
					// 	trigger: ['blur', 'change']
					// },
					// 'userInfo.playerImgUrl': {
					// 	type: 'array',
					// 	required: true,
					// 	min:1,
					// 	message: '请上传图片',
					// 	trigger: ['blur', 'change']
					// },
					// 'userInfo.playerIntroduce': {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请填写简介',
					// 	trigger: ['blur', 'change']
					// },

				},
				fileList1: [],
				fileList2: [],
				show: false,
				institutionId: '',
				detail: {},
				jiList: [],
				jigouName: '',
				jigouId: '',
				programlist: [],
				proName: '',
				formLabelStyle: this.$store.state.formLabelStyle,
				playerId: '',
				playerDetail: ''
			}
		},
		onLoad(option) {
			console.log(option, 'option')

			// uni.showToast({
			// 	title:option,
			// 	duration:3000,
			// 	icon:'none'
			// })
			if (option.competitionId) {
				this.model.userInfo.competitionId = option.competitionId
			}
			if (option.institutionId) {
				this.model.userInfo.institutionId = option.institutionId
				this.institutionId = option.institutionId
			}
			if (option.programId) {
				this.model.userInfo.programId = option.programId
			}
			if (option.playerId) {
				this.playerId = option.playerId
				this.getplayerDetail()
			}
			this.$checkLogin(1).then(res => {
				this.getEventDetail()
			})


		},
		onShow() {
			uni.hideHomeButton()
		},
		methods: {
			getplayerDetail() {
				getCompetitionPlayerDetailApi({
					beforePlayerId: '',
					playerId: this.playerId
				}).then(res => {
					console.log(res, '选手')
					res.img = res.playerImgUrl.split(',')
					this.playerDetail = res
					this.model.userInfo.playerName = res.playerName
					this.model.userInfo.competitionId = res.competitionId
					this.model.userInfo.programId = res.programId || ''
					this.model.userInfo.playerHeadPortrait = res.playerHeadPortrait
					this.model.userInfo.playerImgUrl = res.img
					this.model.userInfo.playerIntroduce = res.playerIntroduce
					this.model.userInfo.institutionId = res.institutionId
					this.institutionId = res.institutionId
					let arr = []
					res.img.map(i => {
						arr.push({
							url: i
						})
					})
					this.fileList1 = arr

					this.fileList2 = [{
						url: res.playerHeadPortrait
					}]
					// this.fileList1 = res.playerHeadPortrait.split(',')

				})
			},
			afterRead(e) {
				console.log(e)
				let obj = {}
				obj.url = e[1].url
				if (e[0] == 'fileList1') {
					this.fileList1.push(obj)
					this.model.userInfo.playerHeadPortrait = e[1].url
				} else {
					this.fileList2.push(obj)
					this.model.userInfo.playerImgUrl.push(e[1].url)
				}


			},
			deletePic(e) {
				console.log(e)

				if (e.name == '1') {
					this.fileList1 = []
					this.model.userInfo.playerHeadPortrait = []
				} else {
					this.fileList2.splice(e.index, 1)
					this.model.userInfo.playerImgUrl.splice(e.index, 1)
				}

			},
			//机构选择
			tapji(e) {
				let index = e.detail.value
				this.jigouId = this.jiList[index].id
				this.model.userInfo.institutionId = this.jiList[index].id
				this.jigouName = this.jiList[index].institutionName
				this.getProgramList()
			},
			tappro(e) {
				let index = e.detail.value
				this.model.userInfo.programId = this.programlist[index].id
				this.proName = this.programlist[index].programName
			},
			hd() {
				getInstitutionList({
					competitionId: '',
					auditStatus: 2,
					pageNum: 1,
					pageSize: 100,
					keyword: ''
				})
			},
			btnSubmit() {
				this.$refs.form1.validate().then(res => {
					// uni.$u.toast('校验通过')
					if (this.model.userInfo.playerPhone && !uni.$u.test.mobile(this.model.userInfo.playerPhone)) {
						uni.$u.toast('请输入正确手机号')
						return
					}
					let data = {
						...this.model.userInfo,
						playerImgUrl: this.model.userInfo.playerImgUrl.toString()
					}
					console.log(data, 'data')
					// return
					if (this.detail.joinType == 1 && this.model.userInfo.programId == '') {
						uni.$u.toast('请选择节目')
						return
					}
					if (this.playerId) {
						data.id = this.playerId
						getCompetitionPlayereditApi(data).then(res => {
							uni.$u.toast('修改成功')
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						})
						return
					}
					if (this.detail.joinType == 2) {
						
						getCompetititonsignUpJoinTypeV2Api(data).then(res => {
							if (res) {
								console.log('dfgd', res)

								wePay(res).then(res => {
									uni.$u.toast('提交成功')
									if (this.model.userInfo.competitionId) {
										uni.navigateTo({
											url: '/pages/home/home/homeDetail?id=' + this
												.model.userInfo.competitionId
										})
										return
									}
									uni.navigateBack({
										delta: 1
									})
								})
								return
							}
							uni.$u.toast('提交成功')
							if (this.model.userInfo.competitionId) {
								uni.navigateTo({
									url: '/pages/home/home/homeDetail?id=' + this.model.userInfo
										.competitionId
								})
								return
							}

							uni.navigateBack({
								delta: 1
							})


						})
					}else{
						getCompetititonsignUpApi(data).then(res => {
							if (res) {
								console.log('dfgd', res)
						
								wePay(res).then(res => {
									uni.$u.toast('提交成功')
									if (this.model.userInfo.competitionId) {
										uni.navigateTo({
											url: '/pages/home/home/homeDetail?id=' + this.model
												.userInfo.competitionId
										})
										return
									}
									uni.navigateBack({
										delta: 1
									})
								})
								return
							}
							uni.$u.toast('提交成功')
							if (this.model.userInfo.competitionId) {
								uni.navigateTo({
									url: '/pages/home/home/homeDetail?id=' + this.model.userInfo
										.competitionId
								})
								return
							}
						
							uni.navigateBack({
								delta: 1
							})
						
						
						})
						
					}
					
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			},
			getEventDetail() {
				getCompetititonDetailApi({
					id: this.model.userInfo.competitionId
				}).then(res => {
					this.detail = res
					this.getinList()


				})
			},
			getinList() {
				// getUserinstitutionListApi({
				//  competitionId:this.model.userInfo.competitionId,
				//  pageSize:1000
				// }).then(res=>{
				//  this.jiList = res.records
				// })
				getInstitutionListApi({
					competitionId: this.model.userInfo.competitionId,
					pageSize: 1000
				}).then(res => {
					this.jiList = res.records
					if (this.institutionId) {
						console.log(this.institutionId, 'sfds')

						this.jiList.forEach(i => {
							if (i.id == this.institutionId) {
								this.model.userInfo.institutionId = i.id
								this.jigouId = i.id
								this.jigouName = i.institutionName
							}

						})
						this.getProgramList()
					}
				})
			},
			//节目列表
			getProgramList() {
				getInstitutionProgramListApi({
					competitionId: this.model.userInfo.competitionId,
					institutionId: this.jigouId
				}).then(res => {
					this.programlist = res
					if (this.model.userInfo.programId) {
						this.programlist.forEach(i => {
							if (i.id == this.model.userInfo.programId) {
								this.proName = i.programName
							}
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.palyer {
		padding: 0 20px;
		box-sizing: border-box;
	}
</style>
